variant（變體）是比 component 更進階的 UI 元件，component 只有三種屬性，variant 可以有更多的變化，可以加入不同的「樣式」或「狀態」，也可以做成「巢狀元件」，甚至可以做 prototype ，變成互動元件，好處多多。

我們以 checkbox 為例：

1. 製作一個 checkbox 的 component，點選右上方的「…」，點選下拉選單裡的「Add variant」，component 就會多一個 variant。
2. 分別對兩個 variant 調整顏色（未選：白底無勾勾，已選：黑底有勾勾），並自訂屬性名稱及狀態：
   屬性名稱：checkboxed
   狀態：未選：no 　　　已選：yes
3. 拖曳出 checkbox 的分身（instance ），就可以對其屬性選擇顯示方式了。
   

練習到這裡，你一定會有一個疑問，這個元件用 component properties 就可以完成，為什麼要用 variant？它們有什麼不同呢？我們可以比較看看：

所以，我們可以這樣設計：簡易、靜態的元件屬性先用 component properties 做好，再用 variant 包成巢狀 component（可設定各種狀態），若需要可加入互動效果，做成互動元件（prototype）。

我們以輸入框元件為例：
假設它有三種狀態（info、disabled、error），二個 icon 切換（calendar、arrow ），如何做呢？

1. 把輸入框的各種狀態先整理出來（如圖）
   
2. 把含有 icon 的基本 input component 做好（記住：icon 是 instance ），component properties 有：Show icon、Text、Instance。
   
3. 從基本 input component 拖曳出分身（instance）, 再 create 成新的 component（名稱：stateInput)
   
4. 新的 stateInput component 加入二個 variant，形成三個狀態，並對每一個狀態調整內容（顏色、icon、文字）。
   
5. 從新的 stateInput component 拖曳出分身，就可以在右側屬性面版中隨意選取各種狀態。
   

由以上的練習可以感受到 variant 真的好用，當然，要做到互動元件必須再加入 prototype，待後續我們講到 prototype 時，再來練習喔！